<template>
  <a-modal v-model="visible" width="1181px">
    <template slot="footer">
      <a-button
        style="background: #d7d7d7; color: #fff; border: none"
        @click="visible = false"
        >关闭</a-button
      >
      <a-button
        type="primary"
        :loading="loading"
        style="margin-left: 20px"
        @click="getPdfs"
        >下载为PDF</a-button
      >
    </template>
    <template slot="title">
      <span>外箱标预览</span>
      <a-button
        type="primary"
        :loading="loading"
        style="margin-left: 20px"
        @click="getPdfs"
        >下载为PDF</a-button
      >
    </template>
    <div id="pdfDom">
      <div
        style="
          width: 1181px;
          height: 1670px;
          font-family: 'Noto Sans SC';
          padding: 10px 0;
        "
        v-for="(item, i) in tagArry"
        :key="i"
      >
        <div
          style="
            height: 135px;
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            align-items: center;
          "
        >
          <div style="font-size: 55px; color: #010101; font-weight: bold">
            {{ item.warehousing }}
          </div>
          <div style="color: #000000">
            <span style="font-size: 50px"> client: </span>
            <b style="font-size: 55px">{{ item.client }}</b>
          </div>
        </div>
        <div
          style="
            height: 94px;
            background-color: #333333;
            display: flex;
            justify-content: space-between;
            padding: 0 19px;
            align-items: center;
            color: #fff;
          "
        >
          <div style="font-size: 45px">{{ item.createTime }}</div>
          <div style="font-size: 55px">
            packages {{ item.nowBoxIndex }} of {{ item.packageNum }}
          </div>
        </div>
        <div
          style="
            height: 429px;
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div
            style="
              width: 715px;
              height: 429px;
              border-bottom: solid 5px #7b7b7b;
              border-right: solid 5px #7b7b7b;
            "
          >
            <div
              style="
                height: 192px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 57px;
                margin-right: 29px;
                margin-left: 20px;
              "
            >
              <div
                style="
                  font-size: 38px;
                  color: #010101;
                  font-weight: 500;
                  letter-spacing: 3px;
                "
              >
                Order ID:{{ item.orderId }}
              </div>
              <!-- <div
                style="
                  border: solid 4px #7b7b7b;
                  width: 204.71px;
                  height: 191.76px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <span
                  style="font-size: 125px; font-weight: 500; color: #000000"
                  >{{ item.type }}</span
                >
              </div> -->
            </div>
            <div
              style="
                font-size: 38px;
                color: #010101;
                font-weight: 500;
                letter-spacing: 3px;
                margin-left: 20px;
              "
            >
              {{ item.boxInfo }}
            </div>
          </div>
          <div
            style="
              width: 466px;
              height: 429px;
              border-bottom: solid 5px #7b7b7b;
              display: flex;
              align-items: center;
              justify-content: center;
            "
          >
            <div style="width: 400px; height: 400px">
              <vue-qr
                :size="400"
                :margin="0"
                :auto-color="true"
                :dot-scale="1"
                :text="item.qrcode"
              />
            </div>
          </div>
        </div>
        <table
          v-if="item.type === 'S' || item.type === 'S+'"
          border="0"
          style="
            width: 1145px;
            margin: 0 18px;
            margin-top: 20px;
            margin-bottom: 20px;
            text-align: center;
            border-collapse: collapse;
          "
        >
          <thead>
            <tr
              style="
                height: 72px;
                font-size: 42px;
                color: #010101;
                font-weight: 500;
              "
            >
              <td
                style="
                  width: 390px;
                  border: 4px solid #7b7b7b;
                  border-right: none;
                  border-bottom: none;
                "
              >
                SKU
              </td>
              <td
                style="
                  width: 261px;
                  border: 4px solid #7b7b7b;
                  border-right: none;
                  border-bottom: none;
                "
              >
                Item Name
              </td>
              <td
                style="
                  width: 250px;
                  border: 4px solid #7b7b7b;
                  border-right: none;
                  border-bottom: none;
                "
              >
                SKU数量/箱
              </td>
              <td
                style="
                  width: 228px;
                  border: 4px solid #7b7b7b;
                  border-bottom: none;
                "
              >
                总箱数
              </td>
            </tr>
          </thead>
          <tbody>
            <tr style="height: 135px; font-size: 40px; color: #010101">
              <td style="border: 4px solid #7b7b7b; border-right: none">
                {{ item.sku }}
              </td>
              <td style="border: 4px solid #7b7b7b; border-right: none">
                {{ item.skuName }}
              </td>
              <td
                style="
                  border: 4px solid #7b7b7b;
                  font-weight: bold;
                  font-size: 60px;
                  border-right: none;
                "
              >
                {{ item.skuNum }}
              </td>
              <td
                style="
                  border: 4px solid #7b7b7b;
                  font-weight: bold;
                  font-size: 60px;
                "
              >
                {{ item.packingNumber }}
              </td>
            </tr>
          </tbody>
        </table>

        <table
          v-if="item.type === 'M'"
          border="0"
          style="
            width: 1145px;
            margin: 0 18px;
            margin-top: 20px;
            margin-bottom: 20px;
            text-align: center;
            border-collapse: collapse;
          "
        >
          <thead>
            <tr
              style="
                height: 72px;
                font-size: 42px;
                color: #010101;
                font-weight: 500;
              "
            >
              <td
                style="
                  width: 261px;
                  border: 4px solid #7b7b7b;
                  border-right: none;
                  border-bottom: none;
                "
              >
                SKU数量/箱数
              </td>
              <td
                style="
                  width: 250px;
                  border: 4px solid #7b7b7b;
                  border-right: none;
                  border-bottom: none;
                "
              >
                SKU总数量
              </td>
              <td
                style="
                  width: 228px;
                  border: 4px solid #7b7b7b;
                  border-bottom: none;
                "
              >
                总箱数
              </td>
            </tr>
          </thead>
          <tbody>
            <tr style="height: 135px; font-size: 40px; color: #010101">
              <td
                style="
                  border: 4px solid #7b7b7b;
                  border-right: none;
                  font-weight: bold;
                  font-size: 60px;
                "
              >
                {{ item.skuNum }}
              </td>
              <td
                style="
                  border: 4px solid #7b7b7b;
                  font-weight: bold;
                  font-size: 60px;
                  border-right: none;
                "
              >
                {{ item.skuSum }}
              </td>
              <td
                style="
                  border: 4px solid #7b7b7b;
                  font-weight: bold;
                  font-size: 60px;
                "
              >
                {{ item.packingNumber }}
              </td>
            </tr>
          </tbody>
        </table>

        <table
          border="0"
          style="
            width: 1145px;
            margin: 0 18px;
            margin-top: 20px;
            margin-bottom: 20px;
            text-align: center;
            border-collapse: collapse;
          "
        >
          <thead>
            <tr
              style="
                height: 72px;
                font-size: 42px;
                color: #010101;
                font-weight: 500;
              "
            >
              <td
                style="
                  width: 261px;
                  border: 4px solid #7b7b7b;
                  border-right: none;
                  border-bottom: none;
                "
              >
                SKU数量/箱数
              </td>
              <td
                style="
                  width: 250px;
                  border: 4px solid #7b7b7b;
                  border-right: none;
                  border-bottom: none;
                "
              >
                SKU总数量
              </td>
              <td
                style="
                  width: 228px;
                  border: 4px solid #7b7b7b;
                  border-bottom: none;
                "
              >
                总箱数
              </td>
            </tr>
          </thead>
          <tbody>
            <tr style="height: 135px; font-size: 40px; color: #010101">
              <td
                style="
                  border: 4px solid #7b7b7b;
                  border-right: none;
                  font-weight: bold;
                  font-size: 60px;
                "
              >
                {{ item.skuNumOnePackage }}
              </td>
              <td
                style="
                  border: 4px solid #7b7b7b;
                  font-weight: bold;
                  font-size: 60px;
                  border-right: none;
                "
              >
                {{ item.skuTotalSum }}
              </td>
              <td
                style="
                  border: 4px solid #7b7b7b;
                  font-weight: bold;
                  font-size: 60px;
                "
              >
                {{ item.thisBoxSum }}
              </td>
            </tr>
          </tbody>
        </table>

        <div
          style="
            width: 1145px;
            height: 326px;
            border: 4px solid #7b7b7b;
            margin: 0 18px;
          "
        >
          <img
            :id="'barcode_' + i"
            style="
              width: 1125px;
              height: 254px;
              margin-top: 9px;
              margin-left: 6px;
            "
          />
          <div
            style="
              height: 55px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 45px;
              color: #000000;
              font-weight: 500;
            "
          >
            {{ item.code128 }}
          </div>
        </div>
        <div
          style="
            width: 1145px;
            height: 171px;
            border: 4px solid #7b7b7b;
            margin: 0 15px;
            margin-top: 39px;
            display: flex;
          "
        >
          <div
            style="
              width: 153px;
              height: 100%;
              border-right: 4px solid #7b7b7b;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 45px;
              color: #000000;
            "
          >
            <div style="width:92px;height;171px">入库确认</div>
          </div>
          <div
            style="
              width: 493px;
              border-right: 4px solid #7b7b7b;
              display: flex;
              align-items: center;
              justify-content: center;
            "
          ></div>
          <div
            style="
              width: 71px;
              border-right: 4px solid #7b7b7b;
              display: flex;
              align-items: center;
              justify-content: center;
            "
          >
            <div
              style="
                width: 43px;
                height: 150px;
                font-size: 45px;
                color: #000000;
              "
            >
              备注
            </div>
          </div>
        </div>
        <div
          style="
            width: 1145px;
            height: 171px;
            border: 4px solid #7b7b7b;
            margin: 0 20px;
            margin-top: 39px;
            display: flex;
          "
        >
          <div
            style="
              width: 153px;
              height: 100%;
              border-right: 4px solid #7b7b7b;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 45px;
              color: #000000;
            "
          >
            <div style="width:92px;height;171px">出库确认</div>
          </div>
          <div
            style="
              width: 493px;
              border-right: 4px solid #7b7b7b;
              display: flex;
              align-items: center;
              justify-content: center;
            "
          ></div>
          <div
            style="
              width: 71px;
              border-right: 4px solid #7b7b7b;
              display: flex;
              align-items: center;
              justify-content: center;
            "
          >
            <div
              style="
                width: 43px;
                height: 150px;
                font-size: 45px;
                color: #000000;
              "
            >
              备注
            </div>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script>
import req from "@/utils/req";
import { downTransLabel, downTransLabelOut } from "@/apis/common";
import VueQr from "vue-qr";
import JsBarcode from "jsbarcode";
export default {
  components: {
    VueQr,
  },
  data() {
    return {
      loading: false,
      visible: false,
      htmlTitle: "外箱标",
      tagArry: [],
    };
  },

  mounted() {
    this.$bus.$off("TransLabel");
    this.$bus.$on("TransLabel", async (record) => {
      let responseBody = await downTransLabel(
        record.transferWarehousingApplyId
      );
      if (responseBody) {
        req.exportPDF(record.transferNo, responseBody);
        // this.tagArry = responseBody;
        // this.htmlTitle = "TransshipmentLabel";
        // this.$nextTick(() => {
        //   this.getJsBarcode();
        // });
        // this.visible = true;
      }
    });
    this.$bus.$off("TransLabelOut");
    this.$bus.$on("TransLabelOut", async (record) => {
      let responseBody = await downTransLabelOut(
        record.byTransferWarehousingOutApplyId
      );
      if (responseBody) {
        req.exportPDF(record.transferNo, responseBody);
        // this.tagArry = responseBody;
        // this.htmlTitle = "TransshipmentLabel";
        // this.$nextTick(() => {
        //   this.getJsBarcode();
        // });
        // this.visible = true;
      }
    });
  },
  methods: {
    getJsBarcode() {
      this.tagArry.forEach((item, index) => {
        JsBarcode("#barcode_" + index, item.code128, {
          format: "CODE128", //选择要使用的条形码类型
          width: 3, //线宽
          height: 80, //条码高度
          displayValue: false, //是否显示文字信息
        });
      });
    },
    getPdfs() {
      this.loading = true;
      this.getPdf();
      setTimeout(() => {
        this.loading = false;
      }, 1000);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.ant-modal-body {
  padding: 0px !important;
  display: flex;
}
</style>
